<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>城市地图</title>
    <link href="../../../vendors/iview/css/iview.css" rel="stylesheet">
    <link href="../../../styles/common.css" rel="stylesheet">
    <link href="../../../styles/citymap.css" rel="stylesheet">
    <link href="../../../styles/company.css" rel="stylesheet">
    <link href="../../../styles/housingManagement.css" rel="stylesheet">
    <link rel="stylesheet" href="components/markers.css">
</head>

<body style="overflow: hidden">

<div class="districtlevel_box" id="app">

    <!--顶部操作项-->
    <div class="city_top clearfix">
        <top-operate v-model="queryParams"></top-operate>
    </div>

    <!--地图部分-->
    <div class="citymap_left">
        <app-map :query-params="queryParams"></app-map>
    </div>

    <!--右边列表部分-->
    <div class="xianshi"></div>
    <div class="list_rightbox">
        <house-list></house-list>
    </div>

</div>

<!--<script src="../../lib/vue/vue.js"></script>-->
<!--<script src="../../lib/iview/js/iview.js"></script>-->
<!--<script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>-->
<!--<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=7d08ef44235626d7ab216a992b4acf95&plugin=AMap.Autocomplete"></script>-->
<!--<script src="//webapi.amap.com/ui/1.0/main.js"></script>-->
<!--<script src="../../lib/jquery-3.2.1.min.js"></script>-->
<!--<script src="../../api/api-config.js"></script>-->
<!--<script src="components/app-map.js"></script>-->
<!--<script src="components/house-list.js"></script>-->
<!--<script src="components/top-operate.js"></script>-->
<script src="../../../vendors/require.js"></script>
<script>
    require.config({
        paths: {
            'jquery': '../../../vendors/jquery-3.2.1.min',
            'vue': '../../../vendors/vue/vue.min',
            'iview': '../../../vendors/iview/js/iview',
            'lodash': 'https://cdn.bootcss.com/lodash.js/4.17.4/lodash',
            'api-config': '../../../api/config',
            'api': '../../../api/map-house',
            'AMap': 'http://webapi.amap.com/maps?v=1.3&key=7d08ef44235626d7ab216a992b4acf95&plugin=AMap.Autocomplete',
            'AMapUI': 'http://webapi.amap.com/ui/1.0/main',
            'app-map': './components/app-map',
            'house-list': './components/house-list',
            'top-operate': './components/top-operate',
        },
        shim: {
            'AMap': {
                exports: 'AMap'
            },
            'AMapUI': {
                exports: 'AMapUI'
            }
        },
    });

    require(['vue', 'iview', 'app-map', 'house-list', 'top-operate', 'jquery'], function (Vue, iview, AppMap, HouseList, TopOperate, $) {
        Vue.use(iview);
        window.bus = new Vue();
        new Vue({
            el: '#app',
            components: {
                TopOperate: TopOperate,
                HouseList: HouseList,
                AppMap: AppMap
            },
            data: {
                queryParams: {
                    search: '',
                    city: '',
                    region: '',
                    type: '',
                    price: '',
                    houseType: '',
                    area: '',
                    more: ''
                },
            },
            watch: {
            },
            created: function () {
            },
            methods: {
            }
        });

        //右侧地图信息的显示和隐藏
        $(".xianshi").hide()
        $(function () {
            $(".jiantou").click(function () {
                $(".list_rightbox").stop().hide();
                $(".citymap_left").animate({width: '100%'});
                $(".xianshi").show()
                $(".circleprice").animate({width: '100%'});
                $(".haidiandao_box451,.guomao_box451,.xihaian_box451,.longhuaqu_box451,.qiongshanqu_box451,.xiuying_box451,.meilan_box451").animate({left: '13%'});
            })
            $(".xianshi").click(function () {
                $(".list_rightbox").stop().show();
                $(".citymap_left").animate({width: '75%'});
                $(".xianshi").hide()
                $(".haidiandao_box451,.guomao_box451,.xihaian_box451,.longhuaqu_box451,.qiongshanqu_box451,.xiuying_box451,.meilan_box451").animate({left: '0'});
            })
        })
    });

</script>
</body>
</html>
